<!DOCTYPE html>
<html>
<head>
	<title>4-2 父子组件间的数据传递</title>
	<script type="text/javascript" src="../../vue.js"></script>
</head>
<body>
	<!-- 写一个计数器 -->
	<div id='root'>
		<counter v-bind:shuzhi="0" v-on:inc="sum"></counter>
		<counter v-bind:shuzhi="1" v-on:inc="sum"></counter>
		<div>{{total}}</div>
	</div>
	<script type="text/javascript">
		/**
		 * 三个知识点:
		 * 1.父组件通过 props 属性的方式向子组件传值;
		 * 2.子组件通过 事件触发的方式 向父组件传值;
		 * 3.父子组件传值单向数据流规定:
		 * 父组件可以向子组件传递任何的数据,但子组件不能修改父组件传递的值,如果一定要修改,拷贝
		 *   一个副本,修改副本的值.
		 */
		var a = {
			props:["shuzhi"],
			data:function(){
				return {
					num:this.shuzhi
				}
			},
			template:"<div v-on:click='jiafa'>{{num}}</div>",
			methods:{
				jiafa:function(){
					this.num += 2,
					//子组件通过触发事件的方式向父组件传值
					this.$emit('inc',2)
				}
			}
		}

		var vm = new Vue({
			el:'#root',
			components:{
				counter:a
			},
			data:{
				total:1
			},
			methods:{
				sum:function(step){
					this.total += step
				}
			}
		})
	</script>
</body>
</html>